<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <script src="../layui/layui.js"></script>
    <style>
        .demo-login-container{width: 320px; margin: 50px auto 0;}
        .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
    </style>
</head>
<body>
<form class="layui-form" lay-filter="userForm">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" id="username" value="" lay-verify="required" placeholder="用户名"
                       lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                       lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
                               lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <img src="https://www.oschina.net/action/user/captcha"
                             onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="edit">新增</button>
        </div>
    </div>
</form>


<script>

    layui.use(function (){
        let form = layui.form;

        // form 表单数据的回显  userForm  lay-filter    回显数据对象属性名要和 表单控件中的name属性一致 否则回显失败

         let user =  JSON.parse(sessionStorage.getItem("user"))
         sessionStorage.removeItem("user")

         form.val("userForm",user)


        //提交事件的监听
        form.on("submit(edit)",function (data){
            let formData = data.filed;
            // 发送异步请求  修改用户信息
            layer.msg("数据添加成功",{icon:1,time:5000},function (){
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                parent.layer.close(index); // 再执行关闭

                // 表格重载

            })

            return false;   //  关闭表单的默认提交   否则会在点击按钮后 重复提交  刷新
        })
    })

</script>

</body>
</html>